<template>
    <div>
        <div class="container">
            <div class="profession-btn">
                <div class="health-btn" align="center">健康管理师</div>
                <div class="teach-btn">教师资格证</div>
            </div>
        </div>

        <div class="container what-health">
            <div class="row">
                <div class="col-md-5 what-health-title">
                    <p>什么是健康管理师</p>
                    <div></div>
                </div>
                <div class="col-md-7 what-health-introduce">
                    <p>健康管理师是国家新增职业，可以从事医疗机构、疾病预防机构、社区健康管理、健康监测、健康评估、健康维护等相关工作。为了适应全面建设小康社会的需要，提高全民族的健康意识和身体素质，培养和造就健康管理人才，推出健康管理师培训课程。</p>
                    <p>学员学完规定课程参加考试的合格者，颁发健康管理师证书。</p>
                    <p>健康管理师是负责健康和疾病的监测、分析、评估以及健康维护和健康促进的专业人员。健康管理师是2005年10月劳动和社会保障部第四批正式发布的11个新职业之一。</p>
                </div>
            </div>
        </div>

        <div class="pro-leavel">
            <div align="center" class="pro-leavel-title">
                <p>职业等级</p>
                <div class="line-div"></div>
            </div>
            <div class="container certificate-list">
                <div v-for="cer in certificatList" :key="cer" align="center" class="bg">
                    <p class="certificate-list-title">职业资格证书</p>
                    <div class="line-div"></div>
                    <p class="level">{{cer.level}}</p>
                    <p class="profession">{{cer.profession}}</p>
                </div>
            </div>
        </div>

        <div class="pro-bottom">
            <div class="container con-box">
                <div class="yellow-box" align="center">
                    <p>考证</p>
                    <p>福利多</p>
                </div>
                <div v-for="adv in advantageList" :key="adv" class="pro-bottom-right">
                    <div>
                        <div>{{adv.id}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<style>
.pro-leavel{
    padding-bottom: 128px;
}

.profession-btn{
    margin-top: 16px;
    margin-bottom: 16px;
}

.profession-btn .health-btn{
    background-color: #D34E4E;
    color: white;
    width: 120px;
    height: 40px;
    border-radius: 4px;
    line-height: 40px;
    margin-right: 24px;
    display: inline-block;
}

.profession-btn .teach-btn{
    width: 120px;
    height: 40px;
    border-radius: 4px;
    display: inline-block;
}

.what-health .what-health-title p{
    font-size: 32px;
    margin-top: 80px;
    font-weight: bold;
}

.what-health .what-health-title div{
    width: 39px;
    height: 2px;
    background-color: #D34E4E;
}

.what-health .what-health-introduce{
    margin-top: 80px;
    margin-bottom: 88px;
}

.what-health .what-health-introduce p{
    font-size: 14px;
    color: #666666;
    line-height: 28px;
    margin-bottom: 30px;
}

/* 职业等级 */
.pro-leavel{
    background-color: #F7F8FA;
}

.pro-leavel .pro-leavel-title{
    padding-top: 76px;
}

.pro-leavel .pro-leavel-title p{
    font-size: 32px;
    font-weight: bold;
}

.pro-leavel .pro-leavel-title div{
    width: 39px;
    height: 3px;
    background-color: #D34E4E;
}

.pro-leavel .certificate-list{
    margin-top: 24px;
}

.pro-leavel .certificate-list .bg{
    width: 200px !important;
    height: 283px;
    display: inline-block;
    margin-right: 10px;
    margin-left: 10px;
    background-image: url("../assets/profession/bg_grade.png");
    background-size: cover;
    padding-top: 72px;
}
.pro-leavel .certificate-list .certificate-list-title{
    color: #283a4f;
    font-size: 18px;
    margin-bottom: 5px !important;
}

.pro-leavel .certificate-list .line-div{
    width: 26px;
    height: 2px;
    background-color: #69727C;
}

.pro-leavel .certificate-list .level{
    font-size: 22px;
    color: #044391;
    margin-top: 50px;
    margin-bottom: 10px !important;
}

.pro-leavel .certificate-list .profession{
    font-size: 14px;
    color: #283a4f;
    font-weight: bold;
}

/* 考证福利多 */
.pro-bottom{
    background-image: url("../assets/profession/位图.png");
    min-height: 662px;
    /* padding-bottom: 228px; */
    margin-bottom: 662px;
    background-color: #F7F8FA;
    /* background-image: auto; */
}
.pro-bottom .con-box{
    width: 1116px;
    height: 662px;
    background: #ffffff;
    margin: auto;
    position: relative;
    top: 100px;
}

.pro-bottom .yellow-box{
    background-image: url("../assets/profession/编组9.png");
    width: 280px;
    height: 488px;
    position: relative;
    left: -60px;
    top:138px;
}

.pro-bottom .yellow-box{
    padding-top: 185px;
}

.pro-bottom .yellow-box p{
    font-size: 32px;
    color:white;
}

.pro-bottom .pro-bottom-right{
    margin-left: 234px;
}
</style>
<script>
export default {
    data() {
        return {
            certificatList:[
                {
                    level:"一级",
                    profession:"高级技师"
                },
                {
                    level:"二级",
                    profession:"技师"
                },
                {
                    level:"三级",
                    profession:"高级"
                },
                {
                    level:"四级",
                    profession:"中级"
                },
                {
                    level:"五级",
                    profession:"初级"
                }
            ],
            advantageList:[
                {
                    id:"01",
                    title:"就业前景",
                    text:"人力资源专家分析，我国未来5到10年，大概需要1000万的健康行业服务人才，对专业健康管理师的需求高达800万。而我国目前职业的健康管理师只有10万人，健康管理师这一职业缺口很大。"
                },
                {
                    id:"02",
                    title:"前途广阔",
                    text:"我国人口有14亿，慢性病患病率高、老年化群、越来越多的亚健康年轻人，我们公民的健康意识还未增强，加上我国医疗体系向以健康管理为主的预防系统逐渐转型，作为健康管理师的您面临的机遇是非常优越的，经济学家断言21世纪是健康管理的世纪。"
                },
                {
                    id:"03",
                    title:"积分入户",
                    text:"凭企业人力资源管理师证书可增加积分，助您拿到城市居住绿卡。"
                },
                {
                    id:"04",
                    title:"见证补贴",
                    text:"人社局和财政局设立专项补贴资金，凭资格证书可以向有关部分申请一次性补贴：1000-4290元。"
                }
            ]
        }
    },
}
</script>